<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar class="navbar">
      <template #title>
        <van-button 
        round 
        plain 
        icon="search" 
        type="info" 
        class="search-btn"
        @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <!-- active 控制高亮的 属性值tab索引 -->
    <van-tabs v-model="active">
      <van-tab :title="item.name" v-for="item in myChannels" :key="item.id">
        <article-list :channel-id="item.id"></article-list>
      </van-tab>
      <span @click="showPopup" class="toutiao toutiao-gengduo"></span>
    </van-tabs>


    <!-- 编辑区弹出框 -->
    <van-popup 
    v-model="show"
    position="bottom"
    :style="{ height: '100%' , width: '100%' }"
    closeable
    close-icon-position="top-left"
    >
     <edit-popup 
     :my-channels="myChannels"
     @delete-channel="delMyChannel"
     @add-channel="addMyChannel"
     @update-active="[(active = $event), (isShowEdit = false)]"
     ></edit-popup>
    </van-popup>
  </div>
</template>
<!-- 
   $event
   1.在原生事件 $event代表事件对象
   2.vue的自定义事件：子传父 传的第一个参数
 -->

<script>
import { getChannelApi , delMyChannelAPI , addMyChannel } from "@/api"
import ArticleList from "./components/ArticleList.vue"

import EditPopup from "@/views/Home/components/EditPopup.vue"

import { mapGetters , mapMutations } from 'vuex'

export default {
  components: {
    ArticleList,
    EditPopup
  },
  data() {
    return {
      active: 0,
      myChannels: [],
      show: false,
    };
  },
  created() {
    // this.getMyChannels();
     this.initMyChannels()
  },

  computed: {
     ...mapGetters(['isLogin'])
  },

  methods: {
    ...mapMutations(['SET_CHANNELS']),

    async initMyChannels() {
      if (this.isLogin) {
        /* 
          登录
            发送请求 携带token
        */
       this,this.getMyChannels()
      } else {
        /* 
           没有登录
            1. 数据库有数据 用数据库里的myChannels
            2.数据库没有数据 发送请求 不携带token 再把我的频道放再本地数据库
        */
        const { myChannels } = this.$store.state
        if (myChannels.length > 0) {
           this.myChannels = myChannels
        } else {
           await this.getMyChannels()
           this.SET_CHANNELS(this.myChannels)
         }
      }
    },

    async addMyChannel(myChannel) {
      try {
        //0:loading
        this.$toast.loading({
          message: '正在添加频道',
          forbidClick: true
        })

        if (this.isLogin) {
          //1.发送请求 添加数据库的频道
          await addMyChannel(myChannel.id, this.myChannels.length)
        } else {
           //如果未登录 将删除好的我的频道的数组存在本地
           this.SET_CHANNELS([...this.myChannels, myChannel])
        }
        //2.在视图层上添加频道
        this.myChannels.push(myChannel)

        //3.提示添加成功
        this.$toast.fail('添加频道成功')
      } catch(err) {
        this.$toast.fail('添加频道失败')
      }
      
    },

    async delMyChannel(id) {
      try {
        this.$toast.loading({
          message: '正在删除频道>>>',
          forbidClick: true
        })

        const newChannels = this.myChannels.filter((item) => item.id !== id)

        if (this.isLogin) {
          //1.发送请求 删除数据库的频道
          await delMyChannelAPI(id)
        } else {
           //如果未登录 将删除好的我的频道的数组存在本地
           this.SET_CHANNELS(newChannels)
        }
       //2. 在视图层上显示删除频道
        this.myChannels = newChannels

        //3.提示删除
        this.$toast.success('删除频道成功')
      } catch (err) {
        this.$toast.fail('删除频道失败')
      }

    },

    showPopup() {
      this.show = true;
    },

    async getMyChannels() {
      try {
        const { data } = await getChannelApi();
        // console.log(data);
        this.myChannels = data.data.channels;
      } catch (error) {
        throw error;
      }
    },
  },
};
</script>

<style scoped lang="less">
:deep(.navbar) {
  background-color: #3d9cfa;
  .van-nav-bar__title {
    max-width: unset;
  }

  .van-icon-search {
    color: #fff;
  }

  .search-btn {
    width: 7.4rem;
    height: 0.85333rem;
    color: #fff;
    background-color: #5babfb;
    border: unset;
  }
}

/* tabs导航条样式 */
:deep(.van-tabs__wrap) {
  padding-right: 66px;

  .van-tabs__nav {
    padding-left: 0;
    padding-right: 0;

    /* tab标签 */
    .van-tab {
      border: 1px solid #eee;
      width: 200px;
      height: 82px;
    }

    /* tab标签下划线 */
    .van-tabs__line {
      width: 31px;
      height: 6px;
      background-color: #3296fa;
      bottom: 40px;
    }
  }
}

/* 字体图标 */
.toutiao-gengduo {
  position: absolute;
  top: 0;
  right: 0;
  width: 66px;
  height: 82px;
  font-size: 40px;
  line-height: 82px;
  text-align: center;
  opacity: 0.6;
  border-bottom: 1px solid #eee;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 1px;
    background-image: url("~@/assets/images/gradient-gray-line.png");
  }
}
</style>
